<!--
 * @Author: 橘子
 * @Date: 2023-02-16 11:07
 * @Project_description: 导入dlog
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <div class='importExl'>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title='title'
      :visible.sync='open'
      append-to-body
      width='400px'
    >
      <!--      上传-->
      <el-upload
        ref='upload'
        :auto-upload='true'
        :before-upload='handleUpload'
        :disabled='isUploading'
        :file-list='fileList'
        :limit='1'
        :on-remove='onRemove'
        accept='.xlsx, .xls'
        action='false'
        drag
      >
        <i class='el-icon-upload'></i>
        <div class='el-upload__text'>将文件拖到此处，或<em>点击上传</em></div>
        <div slot='tip' class='el-upload__tip text-center'>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            :underline='false'
            style='font-size: 12px; vertical-align: baseline'
            type='primary'
            @click='importTemplate'
          >下载模板
          </el-link
          >
        </div>
      </el-upload>
      <div slot='footer' class='dialog-footer'>
        <el-button type='primary' @click='submitFileForm'>确 定</el-button>
        <el-button @click='open = false;fileObj={};fileList=[]'>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import setting from '@/setting'

export default {
  name: 'importExl',
  props: {
    deptOptions: { type: Array }, isDeptId: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      title: '导入',
      open: false,
      isUploading: false,  //是否可点击进行上传
      maxFileSize: setting.upload.maxFileSize * 1024 * 1024, //最大限制
      fileList: [],  //文件列表
      fileObj: {},  //返回对象
      deptId: null, //组织id
    }
  },
  // 方法集合
  methods: {
    /*导入前处理*/
    async handleUpload(file) {
      let _this = this
      //只允许传递一个
      if (this.fileList[0]) return Message.error('只能上传一个文件')
      let fileSize = file.size
      //文件过大
      if (_this.maxFileSize < fileSize) return Message.error(`文件最大5mb`)
      _this.$import.xlsx(file).then(res => {
        //装模做样写入文件
        this.fileList = [{
          name: file.name,
          url: file.type,
        }]
        //存储需要返回的内容对象
        this.fileObj = res
        return false
      }).catch(err => {
        Message.error('导入文件错误')
        return false
      })
    },
    // 提交上传文件
    submitFileForm() {
      if (!this.fileList[0]) return Message.error('请先上传文件')
      if (this.deptId) {
        this.fileObj.results.forEach(e => {
          e._deptId = this.deptId
        })
      }
      this.$emit('click', this.fileObj)
      //初始化操作
      this.fileList = []
      this.deptId = null
      this.fileObj = {}
      this.open = false
    },
    //点击下载模板
    importTemplate() {
      this.$emit('uploadTemplate', true)
    },
    //删除文件
    onRemove() {
      this.fileList = []
      this.fileObj = {}
    },
  },
}

</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>
